Custom User Control তৈরি করা এবং Data Binding এর মাধ্যমে তা MVVM অ্যাপ্লিকেশনগুলিতে ব্যবহার করা একটি গুরুত্বপূর্ণ দক্ষতা, যেটি পুনঃব্যবহারযোগ্য এবং কাস্টমাইজযোগ্য UI উপাদান তৈরি করতে সহায়তা করে। Custom User Control হল একটি কাস্টম UI উপাদান যা একটি বা একাধিক UI উপাদান (যেমন, বাটন, টেক্সটবক্স, ইমেজ) ধারণ করে এবং সাধারণত এটি একটি নির্দিষ্ট ফাংশনালিটি বা লোগিক বাস্তবায়ন করতে ব্যবহৃত হয়।

Custom User Control তৈরি

Custom User Control তৈরি করার জন্য WPF এ XAML এবং C# কোডে কিছু কাস্টম UI উপাদান সংজ্ঞায়িত করা হয়। সাধারণত, একটি কাস্টম কন্ট্রোল হল একটি UserControl যা নতুন বৈশিষ্ট্য এবং ফাংশনালিটি যুক্ত করতে পারে। এই কন্ট্রোলের মাধ্যমে MVVM প্যাটার্নে Data Binding ব্যবহার করা যায়, যাতে এর মধ্যে রাখা ডেটা স্বয়ংক্রিয়ভাবে UI তে প্রদর্শিত হয়।

1. Custom User Control তৈরি করা

UserControl তৈরি করতে, প্রথমে একটি নতুন WPF কন্ট্রোল তৈরি করতে হবে এবং এর মধ্যে UI উপাদান ও কার্যকারিতা সংজ্ঞায়িত করতে হবে।

Step 1: UserControl তৈরি

ধরা যাক, আমরা একটি কাস্টম TextBox কন্ট্রোল তৈরি করতে চাই যা একটি Label এবং একটি TextBox ধারণ করবে।

<UserControl x:Class="MyApp.Controls.CustomTextBoxControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Height="100" Width="300">
    <StackPanel>
        <Label Content="{Binding LabelText}" />
        <TextBox Text="{Binding InputText, UpdateSourceTrigger=PropertyChanged}" />
    </StackPanel>
</UserControl>

এখানে, CustomTextBoxControl একটি Label এবং TextBox ধারণ করে, যেখানে LabelText এবং InputText দুইটি প্রপার্টি Data Binding এর মাধ্যমে কন্ট্রোলের সাথে যুক্ত।

Step 2: C# ক্লাসে প্রপার্টি সংজ্ঞায়িত

এখন, আমরা CustomTextBoxControl ক্লাসে প্রপার্টি সংজ্ঞায়িত করব যা LabelText এবং InputText রাখবে।

public partial class CustomTextBoxControl : UserControl
{
    public CustomTextBoxControl()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty LabelTextProperty =
        DependencyProperty.Register("LabelText", typeof(string), typeof(CustomTextBoxControl), new PropertyMetadata(string.Empty));

    public string LabelText
    {
        get { return (string)GetValue(LabelTextProperty); }
        set { SetValue(LabelTextProperty, value); }
    }

    public static readonly DependencyProperty InputTextProperty =
        DependencyProperty.Register("InputText", typeof(string), typeof(CustomTextBoxControl), new PropertyMetadata(string.Empty));

    public string InputText
    {
        get { return (string)GetValue(InputTextProperty); }
        set { SetValue(InputTextProperty, value); }
    }
}

এখানে, LabelText এবং InputText নামের দুটি DependencyProperty তৈরি করা হয়েছে যা বাইন্ডিংয়ের মাধ্যমে UI তে প্রকাশ পাবে।

2. Custom User Control ব্যবহার করা

এখন, এই কাস্টম কন্ট্রোলটিকে আপনার MainWindow.xaml বা অন্য কোনো XAML ফাইলে ব্যবহার করা যাবে।

Step 1: UserControl ব্যবহার

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:MyApp.Controls"
        Title="MVVM Custom Control" Height="350" Width="525">
    
    <Grid>
        <controls:CustomTextBoxControl LabelText="Enter your name:" InputText="{Binding Name}" />
    </Grid>
</Window>

এখানে, CustomTextBoxControl কাস্টম কন্ট্রোলটি ব্যবহার করা হয়েছে। LabelText প্রপার্টি LabelText এর মান গ্রহণ করবে এবং InputText প্রপার্টি Name প্রপার্টির সাথে বাইন্ড করা হবে যা ViewModel থেকে আসবে।

3. ViewModel সংযোগ করা

এখন, ViewModel এ একটি প্রপার্টি তৈরি করা দরকার যা Name এর মান রাখবে এবং তা View তে প্রদর্শিত হবে।

Step 1: ViewModel তৈরি

public class MainViewModel : INotifyPropertyChanged
{
    private string _name;

    public string Name
    {
        get { return _name; }
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

এখানে, Name প্রপার্টি INotifyPropertyChanged ইন্টারফেস ইমপ্লিমেন্ট করে, যাতে Data Binding এর মাধ্যমে UI তে মান আপডেট হয়।

Step 2: ViewModel সেট করা

এখন, MainWindow.xaml এ DataContext হিসাবে MainViewModel সেট করতে হবে।

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="clr-namespace:MyApp.Controls"
        Title="MVVM Custom Control" Height="350" Width="525">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    
    <Grid>
        <controls:CustomTextBoxControl LabelText="Enter your name:" InputText="{Binding Name}" />
    </Grid>
</Window>

এখানে, Window.DataContext এ MainViewModel সেট করা হয়েছে, যার ফলে InputText প্রপার্টি Name এর সাথে বাইন্ড হবে।

Data Binding এর ধারণা

Data Binding হল একটি প্রক্রিয়া যেখানে UI উপাদানগুলির প্রপার্টি এবং ViewModel এর প্রপার্টির মধ্যে সম্পর্ক স্থাপন করা হয়। MVVM প্যাটার্নে, Data Binding খুব গুরুত্বপূর্ণ ভূমিকা পালন করে কারণ এটি View কে ViewModel এর ডেটা থেকে বিচ্ছিন্ন করে, ফলে UI এবং লজিক একে অপর থেকে আলাদা থাকে।

Key Concepts:

• Two-way Binding: UI এবং ViewModel এর মধ্যে ডেটা পরিবর্তন হলে উভয় দিকে পরিবর্তন ঘটে।
• One-way Binding: ViewModel থেকে UI তে ডেটা প্রেরণ করা হয়, তবে UI থেকে ViewModel এ ডেটা ফিরে আসে না।
• UpdateSourceTrigger: এটি ব্যবহার করে ডেটা আপডেটের trigger নির্ধারণ করা হয়, যেমন PropertyChanged বা LostFocus।

সারাংশ

Custom User Control তৈরি করার মাধ্যমে, আপনি একটি পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করতে পারেন যা MVVM প্যাটার্নে ব্যবহৃত হবে। Data Binding এর মাধ্যমে আপনি ViewModel এর ডেটা UI তে অ্যাক্সেস করতে পারেন এবং তা স্বয়ংক্রিয়ভাবে আপডেট হয়। Custom User Control এবং Data Binding এর এই সংমিশ্রণ অ্যাপ্লিকেশন ডেভেলপমেন্টে নমনীয়তা, কাস্টমাইজেশন এবং রিইউজেবিলিটি বাড়ায়।